import 'dart:io';
import 'package:flutter/material.dart';
import 'image_picker.dart';
import 'photo_view.dart';

const String STATIC_STRING_INPUT_TEXT_HINT =
    "*详情填写可使用户了解更多活动细节，增强用户\n参加意愿。您可以在详情中插入图片及更多可以吸\n引用户参加的关键信息。";
const int maxcountImages = 9;

class EditorPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Padding(padding: EdgeInsets.all(8), child: EditorView()));
  }
}

class EditorViewController{
  List<File> files = [];
  String content = '';

}

class EditorView extends StatefulWidget {
  final EditorViewController controller;
  final FocusNode focusNode;

  const EditorView({Key key, @required this.controller, this.focusNode}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return EditorViewState();
  }
}

class EditorViewState extends State<EditorView> {
  List<File> _images = List();
  final textController = TextEditingController();


  @override
  void initState() {
    textController.addListener(textListener);
  }

  void textListener() {
    widget.controller.content = textController.text;
  }


  @override
  void didUpdateWidget(EditorView oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.controller != oldWidget.controller) {
      textController.removeListener(textListener);
      textController.addListener(textListener);
      widget.controller.files = oldWidget.controller.files;
    }
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // textController.removeListener(textListener);
    // textController.addListener(textListener);
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: EdgeInsets.all(8),
        child: Column(children: [
          Container(
              // height: 100,
              child: TextField(
                focusNode: widget.focusNode,
            style: TextStyle(fontSize: 14),
            // autofocus: true,
            controller: textController,
            // cursorColor: Colors.green,
            maxLines: null,
            decoration: InputDecoration(
                hintText: STATIC_STRING_INPUT_TEXT_HINT,
                border: InputBorder.none),
          )),
          SizedBox(
            height: 8,
          ),
          Expanded(child: getImagesUI()),
        ]));
  }

  void addImages(file){
    _images.add(file);
    widget.controller.files.add(file);
  }

  void removeImage(int i){
    _images.removeAt(i);
    widget.controller.files.removeAt(i);
  }

  Widget getImagesUI() {
    List<Widget> widgets = List();
    for (int i = 0; i <= _images.length; i++) {
      if (i == _images.length) {
        if (i != maxcountImages) {
          widgets.add(Material(
              color: Colors.transparent,
              child: InkWell(
                child: Container(
                  child: Icon(
                    Icons.add,
                  ),
                  color: Colors.grey,
                ),
                onTap: () {
                  addImage(context, (file) {
                    setState(() {
                      addImages(file);
                    });
                  });
                },
              )));
        }
      } else {
        widgets.add(Material(
            color: Colors.transparent,
            child: InkWell(
                onTap: () {
                  openPhotoView(context, _images, i);
                },
                child: AspectRatio(
                    aspectRatio: 1,
                    child: Stack(children: [
                      Positioned.fill(
                          child: Image.file(
                        _images[i],
                        fit: BoxFit.cover,
                      )),
                      Positioned(
                          child: Material(
                              color: Colors.transparent,
                              child: InkWell(
                                  onTap: () {
                                    setState(() {
                                      removeImage(i);
                                    });
                                  },
                                  child: Container(
                                      width: 30,
                                      height: 30,
                                      child: Icon(
                                        Icons.remove,
                                        color: Colors.red,
                                      )))))
                    ])))));
      }
    }

    return GridView.count(
      physics: NeverScrollableScrollPhysics(),
      // childAspectRatio: 1,
      mainAxisSpacing: 8,
      crossAxisSpacing: 8,
      crossAxisCount: 3,
      children: widgets,
    );
  }
}
